<template>
  <div>
    <el-dialog
      title="跟进记录"
      :visible.sync="dialogVisible"
      width="1100px">
      <!--数据列表-->
      <div class="table-container" style="margin-top:0">
        <el-table
          v-loading="listLoading"
          :data="tableData"
          border
          style="width: 100%;">
          <el-table-column
            label="跟进时间 "
            min-width="150"
            align="center">
            <template slot-scope="scope">
                {{scope.row.createTime}}
            </template>
          </el-table-column>
          <el-table-column
            label="客户联系人 "
            min-width="100"
            align="center">
            <template slot-scope="scope">
              {{scope.row.contactName}}
            </template>
          </el-table-column>

          <el-table-column
            label="跟进方式"
            min-width="100"
            align="center">
            <template slot-scope="scope">
              {{scope.row.trackingTypeValue}}
            </template>
          </el-table-column>
          <el-table-column
            label="沟通方式"
            min-width="100"
            align="center">
            <template slot-scope="scope">
              {{scope.row.trackingMethodValue}}
            </template>
          </el-table-column>
          <el-table-column
            label="跟进目的"
            min-width="100"
            align="center">
            <template slot-scope="scope">
              {{scope.row.trackingPurposeValue}}
            </template>
          </el-table-column>
          <el-table-column
            label="跟进内容"
            min-width="200"
            header-align="center">
            <template slot-scope="scope">
              {{scope.row.trackingContent}}
            </template>
          </el-table-column>
          <el-table-column
            label="附件"
            min-width="250"
            align="center">
            <template slot-scope="{row}">
              <!-- <el-image
                v-for="item in scope.row.trackingPics"
                style="width: 50px; height: 50px"
                :key="item"
                :src="item"
                :preview-src-list="scope.row.trackingPics">
              </el-image> -->
              <div v-if="row.trackingPics.length>0">
            <div v-for="(item,index) in row.trackingPics" :key="index" :class="{imgStyle:checkFileType(item)=='image'}">
              <!-- 音频 -->
              <div v-if="checkFileType(item)=='audio'">
                <audio controls style="width: 220px; height: 30px">
                  <source :src="item" type="audio/mpeg" />
                  <source :src="item" type="audio/ogg" />
                  <source :src="item" type="audio/mp3" />
                  您的浏览器不支持该音频格式。
                </audio>
              </div>
              <!-- 图片 -->
              <div v-else-if="checkFileType(item)=='image'" style="width: 40px;margin-right:10px">
                <el-image
                  style="width: 40px; height: 40px;"
                  :src="item"
                  :preview-src-list="Array(item)">
                </el-image>
              </div>
              <div v-else>
                <div>{{ item }}</div>
              </div>
            </div>
          </div>
            </template>
          </el-table-column>
          <el-table-column
            label="下次跟进时间"
            min-width="100"
            align="center">
            <template slot-scope="scope">
              {{scope.row.nextTrackingTime}}
            </template>
          </el-table-column>
          <el-table-column
            label="跟进人"
            min-width="100"
            align="center">
            <template slot-scope="scope">
              {{scope.row.userName}}
            </template>
          </el-table-column>

          <el-table-column
            width="100"
            fixed="right"
            label="操作"
            align="center">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="mini"
                @click="showGj(scope.row,'edit')">编辑
              </el-button>
              <!-- <el-button
                type="text"
                size="mini"
                @click="delItme(scope.row)">删除
              </el-button> -->
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="overflow: hidden">
        <div class="pagination-container">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            layout="total, sizes,prev, pager, next,jumper"
            :current-page.sync="listQuery.pageNum"
            :page-size="listQuery.pageSize"
            :page-sizes="[10,15,20]"
            :total="count">
          </el-pagination>
        </div>
      </div>
    </el-dialog>
    <!--编辑跟进-->
    <addGj ref="addGj" @getList="getList"></addGj>
  </div>

</template>
<script>
import {getCustomerOption,getOrderUsersList,getDeliverList,deliverUpdate,getQiniuToken,postDeliverVoucher,saleDeliversExportAll,deliverBill} from '@/api/partner'
import {formatDate} from '@/utils/date';
import {validateCommission} from '@/utils/validate';
import store from '@/store'
import "@/utils/jQuery.print"
import {customerTrackingList,delTracking} from '@/api/company'
import { mapGetters } from 'vuex'
import addGj  from './addGj'
const defaultListQuery={
  pageNum: 1,
  pageSize: 10,
  dataId:null,
  type:null,
};


export default {
  name: "popFollow",
  data(){


    return {
      listQuery: JSON.parse(JSON.stringify(defaultListQuery)),
      tableData: [],
      count: 0,
      listLoading: false,
      roles:store.getters.roles ? store.getters.roles : [],
      dialogVisible:false
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'mobile',
      'userId'
    ]),
  },
  created() {
    this.dateStamp = new Date(new Date().toLocaleDateString()).getTime();
  },
  filters: {
    formatCreateTime(time) {
      if(time){
        let date = new Date(time);
        return formatDate(date, 'yyyy-MM-dd')
      }else{
        return '--'
      }
    },
  },
  components : {
    addGj
  },
  methods: {
    openWord(item) {
      window.open(item)
    },
     // 判断文件类型
    checkFileType(fileName) {
      if (fileName.match(/\.(jpg|jpeg|png|gif|webp)/)) {
        return "image";
      } else if (fileName.match(/\.(doc|docx)/)) {
        return "word";
      } else if (fileName.match(/\.(wav|mp3|aac|ogg|wma)/)) {
        return "audio";
      } else {
        return "unknown";
      }
    },
    // delItme(item){
    //   this.$confirm('确认删除吗？', '提示', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     type: 'warning'
    //   }).then(() => {
    //     delTracking({ trackingId: item.trackingId }).then((res) => {
    //       this.$message({
    //         type: 'success',
    //         message: '已删除成功!'
    //       });
    //       this.getList();
    //     })
    //   }).catch(() => {
    //     this.$message({
    //       type: 'info',
    //       message: '已取消删除'
    //     });
    //   });
    // },
    //编辑跟进
    showGj(item, type) {
      let data = {}
      data.customerId = item.customerId
      data.customerName = item.customerName
      this.$refs.addGj.showTracking(item,type,this.listQuery.type)
    },
    showPop(dataId,type){
      // console.log("dataId",dataId)
      this.listQuery = JSON.parse(JSON.stringify(defaultListQuery))
      this.listQuery.type = type;
      this.listQuery.dataId = dataId
      this.getList()
      this.dialogVisible = true
    },

    handleSizeChange(val){
      this.listQuery.pageNum = 1;
      this.listQuery.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val){
      this.listQuery.pageNum = val;
      this.getList();
    },


    //获取列表
    getList() {
      this.listLoading = true;
      this.tableData = [];
      customerTrackingList(this.listQuery).then(response => {
        this.tableData = response.list;
        this.count = response.count;
        this.listLoading = false;
      }).catch(()=>{
        this.listLoading = false;
      });
    },
  },
}
</script>
<style scoped>
.imgStyle{
  float: left;
}

</style>



